<template>
	<div style="margin-bottom: 10%;">
		<div style="display: flex; justify-content: space-between;">
			<h3>教师管理</h3>
			<p></p>
			<h4><button @click="go2Add()">添加新的教师</button></h4>
			<p></p>
		</div>
		<hr>
		<div>
			<div>
				<div style="width: 90% ;">
					<table border="1" style="width: 95%">
						<tbody>
							<tr style="background-color: gainsboro">
								<th>用户编号</th>
								<th>用户名称</th>
								<th>联系方式</th>
								<th>用户头像</th>
								<th>修改</th>
								<th>删除</th>
							</tr>
							<tr v-for="t in data.teas">
								<td>{{t.uid}}</td>
								<td>{{t.uname}}</td>
								<td>{{t.phone}}</td>
								<td><img v-bind:src="pic(t.pic)" alt="头像" style="width: 5vw;height: 5vw;" /></td>
								<td><button @click="go2Update(t.uid)">修改</button></td>
								<td><button @click="del(t.uid)">删除</button></td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import { onMounted, reactive } from 'vue';
	import router from "@/router"
	import {$get} from '@/ajax';
	import logo from '@/assets/logo.png';
	
	const data = reactive({
		tea: {},
		teas: [],
	})
	
	const go2Add = () => {
		router.push({
			path: "/adm/addtea",
			query:  {
				uid: 0,
			}
		})
	}
	
	const go2Update = (id) => {
		router.push({
			path: "/adm/addtea",
			query: {
				uid: id,
			}
		})
	}
	
	const del = (id) => {
		console.log("删除老师的id:" + id)
		$get("/api/adm/tea/del?uid=" + id).then((resp) => {
				//打印测试结果
				console.dir(resp.data.data)
				//传输搜索结果
				data.teas = resp.data.data
			})
		console.log(url)
	}
	
	const pic = (id) => {
		let pic = `http://127.0.0.1:9000/api/public/showimg/` + id;
		if (id == undefined || id == "") {
			pic = logo;
		}
		return pic;
	}
	
	onMounted(() => {
		$get(`/api/adm/tea/findAll`).then((resp) => {
				//传输搜索结果
				data.teas = resp.data.data
			})
	})
</script>

<style>
</style>